<template>
	<div class="wrap paypal">
    <div class="content">
      <div class="content_top">
        <div class="title">
          <div>您的訂單已建立，請選擇支付方式！</div>
          <div>應付金額<span class="pricebiao">$</span><span class="price">{{price}}</span></div>
        </div>
        <div class="order_no">
          <div>您的訂單號：<span>{{orderno}}</span></div>
          <!-- <div>如果您在<span>9分59秒</span>內無法完成支付，系統會將您的訂單取消</div> -->
        </div>
      </div>
      <div class="content_bottom">
        <div class="pay_methods">選擇支付方式</div>
        <div class="pay_content">
          <div  class="pay_item" style="flex-direction: column;">
            <PayPal
                :amount="String(price)" 
                currency="HKD"
                :client="credentials" 
                env="production" 
                :button-style="buttonStyle" 
                @payment-authorized="paymentAuthorized"
                @payment-completed="paymentCompleted"
                @payment-cancelled="paymentCancelled"
              >
              </PayPal> 
          </div> 
          <div class="pay_item" v-for="(item,index) in payarr" :key='index'>
            <div class="pay_itemSelect">
              <!-- <img v-if='index == 0' src="@/assets/pay1.png" alt=""> -->
              <div class="pay_con" v-if="index != 1" @click="checkorder(index)">
                <!-- <img :src="item.src" alt=""> -->
                <span>{{item.name}}</span>
              </div>
              <form v-if="index == 1" name="form1" method="post" action="https://test.ipg-online.com/connect/gateway/processing">
                  <div>
                      <input type="hidden" name="txntype" :value="firstObj.txntype"  />
                  </div>
                  <div>
                      <input type="hidden" name="timezone" :value="firstObj.timezone"  />
                  </div>
                  <div>
                      <input type="hidden" name="txndatetime" :value="firstObj.txndatetime"  />
                  </div>
                  <div>
                      <input type="hidden" name="hash_algorithm" :value="firstObj.hash_algorithm"  />
                  </div>
                  <div>
                      <input type="hidden" name="hash" :value="firstObj.hash"  />
                  </div>
                  <div>
                      <input type="hidden" name="storename" :value="firstObj.storename"  />
                  </div>
                  <div>
                      <input type="hidden" name="mode" :value="firstObj.mode"  />
                  </div>
                  <div>
                      <input type="hidden" name="chargetotal" :value="firstObj.chargetotal"  />
                  </div>
                  <div>
                      <input type="hidden" name="currency" :value="firstObj.currency"  />
                  </div>
                  <div>
                      <input type="hidden" name="oid" :value="firstObj.Oid"  />
                  </div>
                  <div>
                      <input type="hidden" name="Language" :value="firstObj.Language"  />
                  </div>
                  <div>
                      <input type="hidden" name="responseSuccessURL" :value="firstObj.responseSuccessURL"  /> 
                  </div>
                  <!-- <input type="hidden" name="responseFailURL" value="https://www.home.hkpcacademy.org/online-application-failure/?program_code=10009773-05">
<input type="hidden" name="responseSuccessURL" value="https://www.home.hkpcacademy.org/online-application-success/?program_code=10009773-05">
<input type="hidden" name="transactionNotificationURL" value="https://www.home.hkpcacademy.org/notification.php"> -->
                  <div>
                      <input type="hidden" name="transactionNotificationURL" :value="firstObj.transactionNotificationURL">
                  </div>
                  <div>
                      <input type="hidden" name="responseFailURL" :value="firstObj.responseFailURL"  />
                  </div>
                  <div class="firstbtn">
                      <input type="submit" value="firstData" />
                  </div>
              </form>
            </div>            
          </div>
        </div>
      </div>
       <div class="payInfo">
         <div class="lin">
          <div>如沒有PayPal賬戶可選「使用扣賬卡或信用卡付款」，繼續以信用卡付款完成交易。</div>
        </div>
        <div class="lin">
          <div>【ATM 轉帳匯款】</div>
          <div>銀行：HSBC</div>
          <div>帳號名稱：Home Tasty Company Limited</div>
          <div>帳號：143-853711-838</div>
          <div>匯款後請於網站上傳付款單圖片</div>
          <div>*訂單—經確認將不能取消</div>
        </div>
       </div>
    </div>
	</div>  	
</template>
<script>
  import PayPal from 'vue-paypal-checkout'
  import {pay,conf,success,payinfo,atmpay,firstDataPay,firstDataPayOther} from '@/api/order';
  import { getToken } from '@/utils/auth' 
  import {checkUser} from '@/api/index'
	export default {
    name: 'settlepay',
    components: {
      PayPal
    },
	  data() {
			return {
        lin:false,
        payarr:[
          // {src:require('@/assets/paypal.png'),name:'貝寶'},
          // {src:require('@/assets/master.png'),name:'全球支付'},
          // {src:require('@/assets/p.png'),name:'給我錢'},
          {src:'',name:'ATM轉帳支付'}
        ],
         credentials: {
          sandbox: "Adw9KqIw2JfZ8zlbnXYqa4N5eBArWnIcI2hYSYPZ0oyOfohX6tUUxsCrnbeKlpT7U3P-4fwkn9Dffdop",
          production: "Adw9KqIw2JfZ8zlbnXYqa4N5eBArWnIcI2hYSYPZ0oyOfohX6tUUxsCrnbeKlpT7U3P-4fwkn9Dffdop"
        },
        buttonStyle: {
          label: 'pay',
          size: 'small',
          shape: 'rect',
          color: 'blue'
        },
        price:'0',
        list:{},
        orderno:null,
        id:null,
        firstObj:{}
			}
    },
    mounted(){
      checkUser(getToken()).then( res=>{
          if(res.errno == -1){
             this.lin = true
          }else{
            this.lin = false
          }
       })
      this.orderno = this.$route.query.orderSn
      conf().then(response => {
        console.log(response)
      })
      payinfo({userId:getToken(),orderSn:this.orderno,payType:0}).then(response => {
          // console.log(response.data.orderTotalPrice)
          if(response.errno == 0){
             this.price = response.data.orderTotalPrice
             this.id = response.data.orderId
              firstDataPay({chargetotal:this.price,oid:this.orderno}).then(response => {
                this.firstObj = response
                this.firstObj.responseFailURL = 'https://www.baidu.com?id=2324324'
                this.firstObj.responseSuccessURL = 'http://xfzw.qianyingapp.com:8888/#/detail?id=1181112'
                // https://www.home.hkpcacademy.org/notification.php
                this.firstObj.transactionNotificationURL = 'http://xfzw.qianyingapp.com'
                this.firstObj.timezone = 'Asia/Hong_Kong'
              })
          }else{
            this.$message({
              type: 'error',
              message: response.errmsg
          })
          }
          
      })
    },
		computed:{
			
		},
		methods: {
      btn(){
         this.$router.push({
           path:'/pay'
         })
      },
			checkorder(index){
        console.log(index)
        // this.$router.push({path:'/settleorder'})
        if(index == 0){
          atmpay({userId:getToken(),orderSn:this.orderno}).then(response => {
            console.log(response)
            if(response.errno == 0){
              if(this.lin){
                this.$router.push({path:'/fictitiousOrderpay',query:{id:this.id}})
                // sessionStorage.setItem('menu',0)
                // this.$router.push({path:'/home',query:{classifyid:0,sta:1}})
                 
              }else{
                this.$router.push({
                    path:'/purorder'
                  })
              }
              
            }
            // this.list = response
          })
        }else if(index == 1){
          debugger
          // firstDataPayOther(this.firstObj).then(response => {
          //   console.log(response)
          // })
        }else{
          //  pay({}).then(response => {
          //   console.log( JSON.parse(response.data.paypalResult))
          //   this.list = response
          // })
        }
          
      },
       paymentAuthorized (data) {
        // 授權完成的回調，可以拿到訂單id
        console.log(data);
      },
      paymentCompleted (data) {
        // 用戶支付完成的回調，可以拿到訂單id
        console.log(data);
        console.log("付款成功")
        success({userId:getToken(),orderSn:this.orderno,payType:1}).then(response => {
            console.log(response)
        })
        // this.$router.push({path:'/paysuccess'})
        this.$router.push({path:'/settleorder',query:{
          orderSn:this.orderno
        }})
      },

      paymentCancelled (data) {
        // 用戶取消交易的回調
        console.log(data);
        console.log("付款失敗")
      }
	  }
	}
</script>
<style  >
.paypay .paypal-button-text{
  display :none!important
}
</style>
<style scoped>
  .payInfo{display: flex;}
	.wrap{
    width: 100%;
    min-height: 80vh;
    box-sizing: border-box;
    background: #f5f5f5;
    padding-top: 30px;
  }
  .content{
    width: 70%;
    height: calc(80vh - 200px);
    background: #fff;
    border-radius: 4px;
    margin: 120px auto;
    box-sizing: border-box;
    padding: 20px;
  }
  .content_top{
    border-bottom: 1px solid #E5E5E5;
    padding: 20px;
    box-sizing: border-box;
  }
  .title{
    display: flex;
    align-items: center;
    box-sizing: border-box;
    line-height: 30px;
  }
  .title>div:nth-child(1){
    font-size: 18px;
    font-weight: bold;
    color: #333333;
  }
  .title>div:nth-child(2){
    font-size: 14px;
    font-weight: 400;
    color: #656565;
    margin-left: 20px;
  }
  .title>div:nth-child(2)>span:nth-child(1){
    font-size: 13px;
    font-weight: bold;
    color: #E3393B;
    margin-left: 10px;
  }
  .title>div:nth-child(2)>span:nth-child(2){
    font-size: 16px;
    font-weight: bold;
    color: #E3393B;
  }
  .order_no{
    display: flex;
    align-items: center;
    box-sizing: border-box;
    font-size: 14px;
    font-weight: normal;
    color: #656565;
    line-height: 30px;
  }
  .order_no>div:nth-child(1){
    margin-right: 20px;
  }
  .order_no>div>span{
    color: #E3393B;
    font-weight: bold;
  }
  .content_bottom{
    padding: 20px;
    box-sizing: border-box;
  }
  .pay_methods{
    font-size: 16px;
    font-weight: bold;
    color: #333333;
  }
  .pay_content{
    display: flex;
    align-items: center;
    margin-top: 20px;
    box-sizing: border-box;
    flex-wrap: wrap;
  }
  .pay_item{
    width: 18%;
    box-sizing: border-box;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
  }

  .pay_itemSelect{
    width: 180px;
    height: 50px;
    border: 1px solid #E5E5E5;
    border-radius: 4px;
    position: relative;
  }
  .pay_itemSelect>img{
    width: 180px;
    height: 50px;
    position: absolute;
    top: 0px;
    left: 0px;
  }
  .pay_con{
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
  }
   .pay_con img{
    width: 100%;
    height: 50px;
  }
  .pay_con>span{
    font-size: 16px;
    font-weight: normal;
    color: #333333;
    margin-left: 10px;
  }
  .lin{
    margin:0 15px;
    width:232px;
  }
  .lin:nth-child(2){
    width:312px;
  }
  .lin div{
    line-height: 25px;
    font-size: 15px;
  }
  .firstbtn{
    width: 100%;
    height: 50px;
  }
  .firstbtn>input{
    width: 100%;
    height: 50px;
    background: transparent;
    outline: none;
    border: 0px;
    font-size: 16px;
    font-weight: normal;
    cursor: pointer;
  }
</style>